@import 'init.scss';
@import 'constants.scss';

body {
  background: aquamarine;
  margin: 0;
  padding: 0;
  font-size: 12px;
}

.header {
  width: 100%;
  height: $navHeight;
  background: #3a3a3a;
  font-size: 16px;

  .container {
    height: 100%;
    margin: 0 auto;
    width: $pageWidth;
    overflow: hidden;

    .log-box {
      width: 140px;
      height: 54px;
      background: url("../images/icon.png");
      float: left;

      a {
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    .nav {
      margin-left: 128px;
      float: left;

      li {
        float: left;
        line-height: $navHeight;
        margin-right: 40px;
        height: $navHeight;

        a {
          color: white;
        }

        &.active {
          border-bottom: 5px solid #5c87d9;
          box-sizing: border-box;
        }
      }
    }

    .auth-box {
      float: right;
      line-height: $navHeight;
      height: $navHeight;
      color: white;

      .iconfont {
        color: #fff;
        font-size: 20px;
      }

      a {
        color: white;
      }
    }
  }
}

.main {
  width: 100%;
  height: $navHeight + 20px;

  .wrapper {
    width: $pageWidth;
    margin: 0 auto;
    overflow: hidden;

    .news-wrapper {
      $bannerWidth: $mainBoxWidth;
      $bannerHeight: 202px;
      float: left;
      width: $mainBoxWidth;
      height: 500px;

      .banner-group {
        width: 100%;
        height: 202px;
        position: relative;

        .banner-ul {
          overflow: hidden;
          width: $mainBoxWidth*4;
          position: absolute;
          left: 0;

          li {
            float: left;
            width: $bannerWidth;
            height: $bannerHeight;

            img {
              width: $bannerWidth;
              height: $bannerHeight;
            }
          }
        }
      }
    }

    .sidebar-wrapper {
      float: right;
      width: $sideBarWidth;
      height: 500px;
    }
  }
}